<!--
 * @Author: wangding
 * @Date: 2020-11-06 13:59:55
 * @LastEditTime: 2021-02-22 16:46:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\alarm_inv.vue
-->
<template>
    <div class="alarm-inv-main-box">
        <div class="search-box">
            <span>{{$t('alarm.date')}}：</span>
            <el-date-picker
            v-model="startTime"
            type="date"
            :placeholder="$t('selectDate')"
            value-format='yyyy-MM-dd'
            @change='changeDateTime'
            :clearable='false'
            :picker-options="pickerOptions"
            >
            </el-date-picker>
            <span>-</span>
            <el-date-picker
            v-model="endTime"
            type="date"
            :placeholder="$t('selectDate')"
            value-format='yyyy-MM-dd'
            @change='changeDateTime'
            :clearable='false'
            :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary" @click="query" style='margin-left:10px;'>{{$t('query')}}</el-button>
            <el-button type="primary" @click="importBut" >{{$t('export')}}</el-button>
        </div>
        <div class="content-box">
            <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='false'>
                <template #errorType="{data}">
                    {{returnTypeCode(data.errorType)}}
                </template>
                <template #option="{data}">
                    <div class="option-box">
                        <el-button size='small' type="primary" icon="el-icon-document"  @click='showDetail(data)' class="marginR10" :title="$t('index.js_seeDetails')"></el-button>
                         <el-button class="marginR10" type="danger" slot="reference" icon='el-icon-search' :title="$t('troubleshooting')" @click='showPropos(data)'></el-button>
                    </div>
                </template>
            </baseTable>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        <detailsModal :detailDataList='detailDataList'></detailsModal>
        <proposal :detailDataList='detailDataList'></proposal>
    </div>
</template>

<script>
import moment from 'moment'
import baseTable from '../../../components/common/baseTable'
import detailsModal from './details'
import proposal from './proposal'
export default {
    components: {
        baseTable,
        detailsModal,
        proposal
    },
    props: {

    },
    data() {
        return {
            startTime:moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),
            endTime:moment().format("YYYY-MM-DD"),
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            size:10,
            current:1,
            total:1,
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('devWifi.wifiSN'),
                value: 'wsn',
                slot: 'wsn'
            },{
                title:  this.$t('device.inverter.SN'),
                value: 'inverterSn'
            },{
                title: this.$t('user.loginName'),
                value: 'loginName'
            },{
                title: this.$t('alarm.errorType'),
                value: 'errorType',
                slot: 'errorType'
            },{
                title: this.$t('alarm.errorMessage'),
                value: 'errorMessage'
            },{
                title: this.$t('test.deviceTest.inverterAlarm.happenTime'),
                value: 'timeStringVal'
            },{
                title: this.$t('opttask.option'),
                value: 'timeStringVal',
                slot:'option'
            }],
            typeList:[],
            detailDataList:{}
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        this.alarmGetAlarmData()
    },
    methods: {
        showDetail(data){
            this.detailDataList = data
            this.$store.commit('setNewVisible',true)
        },
        showPropos(data){
            this.detailDataList = data
            this.$store.commit('setNewVisibleEdit',true)
        },
        changeDateTime(){
            
        },
        async importBut(){
            let url=`/alarm/AlarmExport?firmId=${sessionStorage.getItem('selRow_firmId')}&inverterSn=${sessionStorage.getItem('selRow_inverter_sn')}&startTime=${this.startTime}&endTime=${this.endTime}&size=10000&current=1&exportFlag=1`
            // let res  =await this.axios.get(url)
            // console.log(res);
            // window.open(res)
            this.comm.windowOpen(url)
        },
        query(){
            this.current = 1
            this.alarmGetAlarmData()
        },
        async alarmGetAlarmData(){
            this.loading = true
            let res = await this.API.alarmGetAlarmData({
                firmId:sessionStorage.getItem('selRow_firmId'),
                inverterSn:sessionStorage.getItem('selRow_inverter_sn'),
                startTime:this.startTime,
                endTime:this.endTime,
                size:this.size,
                current:this.current,
            })
            this.loading = false
            this.dataRows = res.rows
            this.total = res.total
        },
        async getDictionaryBatch(){
            let res  = await this.API.getDictionaryBatch({
                dictCodes:'ALARM_TYPES',
                lang:localStorage.getItem('lan') || 'zh_CN'
            })
            this.typeList = res.ALARM_TYPES
        },
        returnTypeCode(val){
           let code = ''
           this.typeList.forEach(item =>{
               if(item.value == val){
                   code = item.code
               }
           })
           return code
        },
        handleCurrentChange(val) {
          this.current = val
          this.alarmGetAlarmData()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.alarmGetAlarmData()
        },

    },
};
</script>

<style  lang="less" scoped>
.alarm-inv-main-box{
    .search-box{
        display: flex;
        align-items: center
    }
}
</style>
